import { Button, Input, Space } from 'antd';
import type { ValidateMessages } from 'ym-design';
import { YmForm } from 'ym-design';

const { FormItem, useForm } = YmForm;

const myMessages: ValidateMessages = {
  required: '你需要一个 ${displayName}',
};

function DependenciesValidate2() {
  const [form] = useForm();
  return (
    <div style={{ maxWidth: '600px' }}>
      <YmForm
        form={form}
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        onFieldsChange={(changedfields, fieldDataList) => {
          console.log(
            '--Form--onFieldsChange--changedfields--fieldDataList--:',
            changedfields,
            fieldDataList,
          );
        }}
        onValuesChange={(changedValues, allValues) => {
          console.log(
            '--Form--onValuesChange--changedValues--allValues--:',
            changedValues,
            allValues,
          );
        }}
        onFinish={(values) => {
          console.log('--Form--onFinish--values:', values);
        }}
        onFinishFailed={(errorInfo) => {
          console.log('--Form--onFinishFailed--errorInfo--:', errorInfo);
        }}
        validateMessages={myMessages}
      >
        <FormItem
          name="password"
          label="密码"
          validateFirst
          messageVariables={{ displayName: '密码' }}
          rules={[
            {
              required: true,
              whitespace: true,
            },
            {
              validator(rule, value) {
                if (value.length < 6) {
                  return Promise.reject('你的 ${displayName} 不能少于6位……');
                }
                return Promise.resolve();
              },
            },
          ]}
        >
          <Input type="text" placeholder="请输入 password" />
        </FormItem>

        <FormItem
          // initialValue="123"
          dependencies={['password']}
          name="passwordConfirm"
          label="密码确认"
          messageVariables={{ displayName: '密码确认' }}
          rules={[
            { required: true, whitespace: true },
            // {
            //   validator(rule, value, callback) {
            //     if (value !== '123') {
            //       callback('密码确认错误')
            //     }
            //   }
            // }
            ({ getFieldValue }) => ({
              validator(rule, value) {
                return new Promise((resolve, reject) => {
                  if (getFieldValue('password') !== value) {
                    reject('${displayName} not same as 密码');
                  } else {
                    resolve();
                  }
                });
              },
            }),
          ]}
        >
          <Input type="text" placeholder="请输入 password confirm" />
        </FormItem>

        <FormItem wrapperCol={{ span: 16, offset: 8 }}>
          <Space direction="horizontal">
            <Button htmlType="submit" type="primary">
              submit
            </Button>
            <Button htmlType="reset">reset</Button>
          </Space>
        </FormItem>
      </YmForm>
    </div>
  );
}

export default DependenciesValidate2;
